<script>
import Quit from "@/components/views/answer/util/Quit.vue";

export default {
  name: "QuestionList",
  components: {Quit},
  data(){
    return {
      isClicked:false,
      taskList:[],
      show_tx:false,
      styleObj:{
        backgroundColor: 'green',
      },

    }
  },
  created() {

    this.init_task_list();
  },
  methods:{


      //进入后,根据用户id,查询其现有任务列表
      init_task_list(){
          const accId = sessionStorage.getItem("accountId");

          const _this = this;
          this.$http.get("tasks/getTaskByUid?accId=" + accId ).then(function(res){
              if(res.data.success){
                  _this.taskList = res.data.data;
                  console.log(_this.taskList)
                  if(_this.taskList &&_this.taskList.length!=0){
                    _this.show_tx = true;
                  }
              }else {
                _this.$message.error("用户信息请求失败,请联系管理员")
              }
          })
      },



      //点击任务时，跳转到提示页，并携带任务类型 1，2，3,存入store中
      show_hint(task){
        const _this = this;
        this.isClicked = true,
        this.$store.commit("saveAccTaskType",task.taskType)
        this.$store.commit("saveAccTaskId",task.id)
        this.$router.push('que_hint');
        setTimeout(function (){
          _this.isClicked = false;
        },500)
      },
      //设置已完成任务的样式
      getItemStyle(task){
          if(task.state==2){
            return {
              backgroundColor: '#67C23A'
            }
          }
      }
  }
}
// 您好！欢迎参加本测试！首先屏幕中央会出现一个“＋”注视点提醒您集中注意力。随后屏幕中央会出现一个中文词汇。
//             请您判断这个词所指的动作是否涉及身体或身体部位，如果涉及，则按“是”；如果不涉及，则按“否”。
</script>

<template>
    <el-card class="card1">
        <el-row>
          <el-col :offset=9 :span="6"  class="ql-h2">
            任务列表
          </el-col>
          <el-col :span="9" style="
           display: flex;
          justify-content: right;
          align-items: center;
          font-size: 45px;">
              <Quit></Quit>
          </el-col>
        </el-row>

        <div v-if="show_tx" class="ql-div1">
          <el-button
              v-for="task in taskList" :key="task.id"
              @click="show_hint(task)" :disabled="isClicked || task.state==2" :style="getItemStyle(task)" class="ql-btn1" type="primary"  circle>
            <span v-if="task.taskType==1" class="ql-sp1">
              任务一
              <span style="font-size: 25px" v-if="task.state==2"><br/>（已完成）</span>
              <span style="font-size: 25px" v-if="task.state==1"><br/>（点击开始）</span>
            </span>
            <span v-if="task.taskType==2" class="ql-sp1">
              任务二
              <span style="font-size: 25px" v-if="task.state==2"><br/>（已完成）</span>
              <span style="font-size: 25px" v-if="task.state==1"><br/>（点击开始）</span>
            </span>
            <span v-if="task.taskType==3" class="ql-sp1">
              任务三
              <span style="font-size: 25px" v-if="task.state==2"><br/>（已完成）</span>
              <span style="font-size: 25px" v-if="task.state==1"><br/>（点击开始）</span>
            </span>
            <span v-if="task.taskType==4" class="ql-sp1">
              任务一
              <span style="font-size: 25px" v-if="task.state==2"><br/>（已完成）</span>
              <span style="font-size: 25px" v-if="task.state==1"><br/>（点击开始）</span>
            </span>
            <span v-if="task.taskType==5" class="ql-sp1">
              任务二
              <span style="font-size: 25px" v-if="task.state==2"><br/>（已完成）</span>
              <span style="font-size: 25px" v-if="task.state==1"><br/>（点击开始）</span>
            </span>
            <span v-if="task.taskType==6" class="ql-sp1">
              任务三
              <span style="font-size: 25px" v-if="task.state==2"><br/>（已完成）</span>
              <span style="font-size: 25px" v-if="task.state==1"><br/>（点击开始）</span>
            </span>
            <span v-if="task.taskType==7" class="ql-sp1">
              任务四
              <span style="font-size: 25px" v-if="task.state==2"><br/>（已完成）</span>
              <span style="font-size: 25px" v-if="task.state==1"><br/>（点击开始）</span>
            </span>
          </el-button>
        </div>

        <div class="ql-h2" style="margin-top: 100px" v-if="!show_tx">
          <span>当前无任务，请联系操作员，发布任务</span>
        </div>


    </el-card>

</template>

<style scoped>
.card1{
  height: 100%;
  width: 100%;
  background-color: #e0f6f1;
}
.ql-h2{
  text-align: center;
  font-weight: 700;
  font-size: 45px;
}
.ql-div1{
  margin-top: 10vw;
  display: flex;
  justify-content: space-around;
}

/deep/.ql-btn1{
  width: 20vw;
  height: 20vw;
  font-size: 45px;
}
.custom-dialog-title{
  font-size: 20px;
  color: red;
}


</style>